<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>期刊分析</title>
    <!--<script type="text/javascript" src="/libms/lib/js/jquery-3.2.1.min.js"></script>-->
    <!--<script type="text/javascript" src="/libms/lib/js/bootstrap.min.js"></script>-->

    <!--<script src="/libms/lib/layui/layui.js" type="text/javascript"></script>-->
    <!--<link rel="stylesheet" href="/libms/lib/layui/css/layui.css">-->
    <!--<link rel="stylesheet" href="/libms/lib/css/bootstrap.min.css">-->

    <script type="text/javascript" src="../lib/highcharts/highcharts.js"></script>

</head>
<body>
<div class="container">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 90px;">分析类型</label>
            <div class="layui-input-block">
                <input type="radio" name="type" value="1" title="出版社" lay-filter="switchTest" checked>
                <input type="radio" name="type" value="2" title="类型" lay-filter="switchTest">
                <input type="radio" name="type" value="3" title="名称" lay-filter="switchTest">
            </div>
        </div>
    </form>
    <button class="btn btn-default" id="exportexcel">导出excel</button>
    <button class="btn btn-primary" id="zhutu">显示柱状图</button>
    <button class="btn btn-info" id="zhexiantu">显示折线图</button>
    <button class="btn btn-success" id="bingyu">显示饼状图</button>
    <table class="layui-table" id="qkfxt" lay-filter="qkfxt">

    </table>


    <div id="hc"></div>
</div>

</body>
</html>
<script>
    var table;
    var tableData;
    var titles = [];
    var zbz = [];
    var zbdata = []

    titles[1] = "出版社";
    titles[2] = "作者";
    titles[3] = "类型";
    var etitle;
    layui.use(['table', 'form'], function () {
        var fxtype = $("input[name='type']:checked").val();
        var form = layui.form;
        etitle = [titles[fxtype], "数量"];
        form.render();
        form.on('radio()', function (data) {
            fxtype = data.value;
            etitle = [titles[fxtype], "数量"];
            table.reload("qkfxt", {
                where: {
                    type: fxtype
                },
                cols: [[
                    {field: 'type', title: etitle[0]},
                    {field: 'num', title: '借阅次数'}
                ]]
            })
        });


        table = layui.table;
        table.render({
            elem: '#qkfxt',
            url: '/libms/analyze/borrow',
            method: "post",
            cols: [[
                {field: 'type', title: etitle[0]},
                {field: 'num', title: '借阅次数',},
            ]],
            where: {
                type: fxtype
            },
            done: function (res, curr, count) {
                tableData = res;
                zbz = [];
                zbdata = [];
                for (var i in res.data) {
                    zbz.push(res.data[i].type);
                    zbdata.push(res.data[i].num);
                }
            }


        });
    });
    $("#exportexcel").click(function (event) {
        $.data2excel({
            name: "期刊资料分析",
            filename: "期刊资料分析",
            content: tableData.data,
            title: etitle,
            fileds: ["type", "num"],
        })
    });
    $("#zhutu").click(function (event) {
        createch('column')
    });
    $("#zhexiantu").click(function (event) {
        createch('line')
    });

    function createch(type) {
        var chart = Highcharts.chart('hc', {
            chart: {
                type: type
                // type: 'line'
                // type: 'pie'
            },
            title: {
                text: etitle[0] + '统计情况'
            },
            subtitle: {
                // text: '数据来源：thesolarfoundation.com'
            },
            yAxis: {
                title: {
                    text: '期刊数量'
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },
            xAxis: {
                categories: zbz,
                tickLength: 10
            },
            series: [{
                name: '期刊数量',
                data: zbdata
            }],
            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 500
                    },
                    chartOptions: {
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        }
                    }
                }]
            }
        });
    }


</script>